<script setup lang="ts">
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
import { Search } from '@element-plus/icons-vue'
import type { FormInstance, FormRules } from 'element-plus'
import { useUserStoreHook } from "@/store/modules/user";
import userDetail from '@/views/system/components/userDetail.vue'
import User from "@/class/User";

const params = reactive({
  search: '', // 查询参数
  current: 1, // 当前页码
  size: 10 // 每页显示条数
});

//搜索
const arr = ref([]);//声明一个新数组
const enterSearch = () => {
  if (params.search !== '') {
    arr.value = tableDataCopy.value.filter(item => item.account.indexOf(params.search) !== -1);
    if (arr.value) {
      tableData.value = arr.value;
      total1.value = arr.value.length;
    }
  } else {
    getDataList();
  }
}

const dialogFormVisible = ref(false);
const form = reactive({
  account: '',
  password: '',
  password2: '',
  phone: '',
  email: '',
  type: 1,
})

//列表数据
const tableData = ref(
);
const tableDataCopy = ref(
);

//编辑
const info = ref<User>(new User)
const handleEdit = (e: User) => {
  info.value = e;
  isShow.value = true;
}
//删除
const { proxy } = getCurrentInstance();
const handleDel = async (e: any) => {
  proxy
    .$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "error",
    })
    .then(async () => {
      await useUserStoreHook()
        .delete(e)
        .then(res => {
          if (res.code == 200) {
            console.log(res.msg);
            dialogFormVisible.value = false
            getDataList();
          }
        });
    })
    .catch(() => {
      proxy.$message({
        type: "info",
        message: "已取消删除",
      });
    });

}

//分页
const total1 = ref<number>(100);
const handleCurrentChange = ref();

//编辑组件
const isShow = ref(false)

const closeEdit = () => {
  isShow.value = false
  info.value = new User()
}
const success = () => {
  isShow.value = false
  info.value = new User()
}



//表单验证
const ref_form = ref<FormInstance>()
const rules = reactive({
  account: [{
    required: true,
    message: "请输入账号",
    trigger: "blur"
  }],
  password: [{
    required: true,
    message: "请输入密码",
    trigger: "blur"
  }],
  password2: [{
    required: true,
    message: "请输入密码",
    trigger: "blur"
  }],
  phone: [{
    required: true,
    message: "请输入手机号",
    trigger: "blur"
  }],
  email: [{
    required: true,
    message: "请输入邮箱",
    trigger: "blur"
  }]
})

//弹出框
const formLabelWidth = '140px';


const sava = async (ref_form: FormInstance | undefined) => {
  if (!ref_form) return;
  await ref_form.validate((valid, fields) => {
    if (valid) {
      useUserStoreHook()
        .addUser({
          email: form.email,
          phone: form.phone,
          account: form.account,
          password: form.password,
          type: 0
        })
        .then(res => {
          if (res.code == 200) {
            console.log(res.msg);
            dialogFormVisible.value = false
          }
        });
    } else {

      return fields;
    }
  });
};

// 获取列表数据
const getDataList = async () => {
  await useUserStoreHook().getUserList({
    type: 0,
    current: 1,
    size: 10
  })
    .then(rep => {
      if (rep.code == 200) {
        tableData.value = rep.data.data
        tableDataCopy.value = rep.data.data
        total1.value = rep.data.count;
      }
    })
};

onMounted(async () => {
  await getDataList();
});

//开关 
const changeSwitch = async (e) => {
  await useUserStoreHook().update({
    id: e.id,
    isEnable: e.isEnable
  })
    .then(rep => {
      if (rep.code == 200) {
        console.log(rep.msg);
      }
    })
}
const labelPosition = ref('left')
</script>


<template>
  <div class="ve_container">
    <el-row>
      <el-col :span="8">
        <el-input clearable v-model="params.search" placeholder="搜索" @keyup.enter="enterSearch">
          <template #append>
            <el-button type="" :icon="Search" @click="enterSearch" />
          </template>
        </el-input>
        <el-button type="primary" @click="dialogFormVisible = true" style="position: absolute;margin-left: 30px;">
          添加
        </el-button>
      </el-col>
    </el-row>
    <!-- 列表 -->
    <el-table :data="tableData" ref="ruleForms" :border="true" style="margin-top: 30px; text-align: left;">
      <el-table-column fixed prop="account" label="用户名" width="120"></el-table-column>
      <el-table-column prop="id" label="用户id" width="120" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="email" label="邮箱" width="175">
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="175">
      </el-table-column>
      <el-table-column prop="updateTime" label="更新时间" width="175">
      </el-table-column>
      <el-table-column prop="isEnable" type="boolean" label="是否启用" width="100">
        <template #default="scope">
          <el-switch v-model="scope.row.isEnable" class="ml-2"
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" @change="changeSwitch(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDel(scope.row.id)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination small background layout="prev, pager, next" :total="total1" class="mt-4"
      @current-change="handleCurrentChange" v-model:currentPage="params.current" />

    <!-- 详细弹窗 -->
    <userDetail :isShow="isShow" :info="info" @close-edit="closeEdit" @success="success"></userDetail>
    <!-- 添加弹窗 -->
    <el-dialog v-model="dialogFormVisible" title="新增" width="40%" draggable>
      <el-form :model="form" ref="ref_form" label-width="140px" :rules="rules">
        <el-form-item label="账号" prop="account" :label-width="formLabelWidth">
          <el-input v-model="form.account" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码" prop="password" :label-width="formLabelWidth">
          <el-input v-model="form.password" type="password" autocomplete="off" />
        </el-form-item>
        <el-form-item label="确认密码" prop="password2" :label-width="formLabelWidth">
          <el-input v-model="form.password2" type="password" autocomplete="off" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone" :label-width="formLabelWidth">
          <el-input v-model="form.phone" autocomplete="off" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email" :label-width="formLabelWidth">
          <el-input v-model="form.email" type="email" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">关闭</el-button>
          <el-button type="primary" @click="sava(ref_form)">
            添加
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<style>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
